<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>魔方动画</title>
    <link rel="stylesheet" type="text/css" href="mofang.css">
</head>

<body>
    <!-- 最外层div包裹整个动画 -->
    <div id="top">
        <!-- box代表整个魔方 -->
        <div class="box">
            <!-- 第一个边-->
            <div class="said1">
                <div class="saida white"></div>
                <div class="saida green"></div>
                <div class="saida blue"></div>
                <div class="saida yellow"></div>
                <div class="saida orange"></div>
                <div class="saida red"></div>
                <div class="saida purple"></div>
                <div class="saida black"></div>
                <div class="saida pink"></div>
            </div>
            <!-- 第二个边 -->
            <div class="said2">
                <div class="saida blue"></div>
                <div class="saida white"></div>
                <div class="saida green"></div>
                <div class="saida orange"></div>
                <div class="saida yellow"></div>
                <div class="saida purple"></div>
                <div class="saida red"></div>
                <div class="saida pink"></div>
                <div class="saida black"></div>
            </div>
            <!-- 第三个边 -->
            <div class="said3">
                <div class="saida orange"></div>
                <div class="saida blue"></div>
                <div class="saida white"></div>
                <div class="saida black"></div>
                <div class="saida green"></div>
                <div class="saida yellow"></div>
                <div class="saida pink"></div>
                <div class="saida red"></div>
                <div class="saida purple"></div>
            </div>
            <!-- 第四个边 -->
            <div class="said4">
                <div class="saida green"></div>
                <div class="saida pink"></div>
                <div class="saida black"></div>
                <div class="saida red"></div>
                <div class="saida white"></div>
                <div class="saida orange"></div>
                <div class="saida yellow"></div>
                <div class="saida purple"></div>
                <div class="saida blue"></div>
            </div>
            <!-- 第五个边 -->
            <div class="said5">
                <div class="saida pink"></div>
                <div class="saida black"></div>
                <div class="saida purple"></div>
                <div class="saida orange"></div>
                <div class="saida yellow"></div>
                <div class="saida white"></div>
                <div class="saida red"></div>
                <div class="saida blue"></div>
                <div class="saida green"></div>
            </div>
            <!-- 第六个边 -->
            <div class="said6">
                <div class="saida black"></div>
                <div class="saida purple"></div>
                <div class="saida pink"></div>
                <div class="saida orange"></div>
                <div class="saida red"></div>
                <div class="saida blue"></div>
                <div class="saida green"></div>
                <div class="saida white"></div>
                <div class="saida yellow"></div>
            </div>
        </div>
    </div>
</body>

</html>
